<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // 鼠标事件
        //   点击   click   dblclick    mouseup    mousedown
        //   移动事件   mouseover / mouseout   /   mousemove 

        // 坐标
        //   鼠标距离浏览器边缘的坐标  e.clientX / e.clientY    e.x / e.y (在低版本IE上不兼容)  
        //   鼠标距离页面边缘的坐标   e.pageX / e.pageY
        //   盒子距离最近的具有定位的祖先元素   box.offsetLeft / box.offsetTop

        // 重绘和回流
        //    重绘   css属性中  修改颜色
        //    回流   css属性中  display:none / margin / font-size
        //    js当中 ，
        //       获取样式获取获取坐标
        //       对DOM进行增删改查  
        //       尽量减少回流的次数

        // 放大镜
        //    css部分
        //      隐藏元素的方法   建议使用占位置的属性  visibility:hidden / visible   opacity:0/1
        //      元素如果使用display:none属性隐藏，那么就获取不到元素相关的样式
        //      cssText +=
        //      鼠标可以改变样式  cursor:pointer / move / wait / ....

        //      左边的图和遮罩层的比例 = 右边大图和右边盒子的比例
        //    js部分
        //      左边遮罩层与右边大图的移动方向是相反的  
        //      移动是成比例的 scale = 右图的移动范围 / 左边遮罩层的移动范围
        //      注意：移动事件需要写在左边盒子上，不能写在遮罩层上(跑丢了)


        // 小图切换大图
        //   小图一个数组   大图也是一个数组
        //    切换图片的时候，只需要切换图片的路径
        //    标签的自定义属性


    </script>
    
</body>
</html>